<template>
  <div class="tinymce-container">
    <Editor :id="tinymceId" v-model="value" :init="init" @onClick="onClick" />
    <div class="tinymce_btn">
      <el-button type="primary" size="mini" @click="setInnerlink">添加内链</el-button>
      <el-button type="primary" class="blue" size="mini" @click="dialogShow = true">检测内容是否有违禁词</el-button>
    </div>
    <BouncedDialog
      title="检测结果"
      :dialog-show.sync="dialogShow"
      :width="70"
      class="prohibited "
    >
      <h1>该功能正在加急研发中，敬请期待</h1>
      <br>
      <br>
      <img src="@/assets/404_images/404.png" alt="">

    </BouncedDialog>
  </div>
</template>

<script>
import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons.min.js'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import uploadApi from '@/api/upload'
import innerApi from '@/api/column'
// 下面的插件是自带的,不需要引入
// import 'tinymce/plugins/contextmenu'
// import 'tinymce/plugins/colorpicker'
// import 'tinymce/plugins/textcolor'
export default {
  name: 'MyTinymce',
  components: {
    Editor
  },
  props: {
    id: {
      type: String,
      default: function() {
        return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
      // 给每个tinymce设置不同的id
    },
    tinymceHtml: {
      type: String,
      default: ''
    },
    tinymceHeight: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      website_id: this.$store.getters.siteId,
      dialogShow: false,
      tinymceId: this.id,
      value: this.tinymceHtml, // 父组件通过ref拿到该组件的值
      init: {
        convert_urls: false,
        selector: '#${this.tinymceId}',
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
        height: this.tinymceHeight,
        plugins: 'image link code table lists wordcount', // 引入插件
        toolbar:
          'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen', // 工具栏
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: true, // 禁用编辑器底部的状态栏
        statusbar: true, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: true, // 隐藏最上方menu
        paste_data_images: true, // 设置为“true”将允许粘贴图像，而将其设置为“false”将不允许粘贴图像。
        file_picker_types: 'image',
        images_upload_credentials: true,
        // init_instance_callback: function(editor) {
        //   editor.on('NodeChange Change KeyUp SetContent', () => {
        //     this.hasChange = true
        //     this.$emit('input', editor.getContent())
        //   })
        // },
        fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
        font_formats:
          '微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', // 字体
        /**
         * 下面方法是为tinymce添加自定义插入图片按钮
         * 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容
         */
        // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
        images_upload_handler: function(blobInfo, success, failure) {
          const formdata = new FormData()
          formdata.append('file', blobInfo.blob())
          // this.handleImgUpload(blobInfo, success, failure)
          uploadApi.upload(formdata)
            .then(res => {
              success(res.data.url)
            })
            .catch(res => {
              failure('error')
            })
        }
      }
    }
  },
  computed: {},
  watch: {
    tinymceHtml(newV, oldV) {
      this.value = newV
    },
    value(newV, oldV) {
      this.$emit('update', newV)
    }
  },
  created() {},
  mounted() {
    tinymce.init({})
  },
  methods: {
    setInnerlink() {
      const val = {
        website_id: this.website_id,
        content: this.value
      }
      innerApi.addInnerChat(val).then(res => {
        if (res.code == 0) {
          this.value = res.data
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 用于上传图片的，后端需要提供好上传接口
    handleImgUpload(blobInfo, success, failure) {
      const formdata = new FormData()
      formdata.set('upload_file', blobInfo.blob())
      const new_headers = { headers: this.headers }
      const upload_url = process.env.BASE_API + '/attachment/uploadAndSave'
      axios.post(upload_url, formdata, new_headers).then(res => {
        success(res.data.data[0])
      }).catch(res => {
        failure('error')
      })
    },
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    }

  }
}
</script>
<style lang="scss" scoped>
.tinymce_btn{
  margin-top: 5px;

}
</style>
